<template>
  <div class="dashboard" style="height: 100%;">


    <div class="head">
      <div class="txt1">财务统计</div>
      <!-- <div class="txt2">商城管理系统</div> -->
    </div>
    <div class="dashCon">
      <!-- <div class="cardBox">
            <div class="card">
              <div class="iconBox"> <i class="el-icon-user-solid"></i> </div>
              <div class="cardTxt">
                <h3>{{mainData&&mainData.yhzs}}</h3>
                <div>用户数总计</div>
              </div>
            </div>
            <div class="card" style="color: #aaaaff;">
              <div class="iconBox"> <i class="el-icon-tickets"></i> </div>
              <div class="cardTxt">
                <h3>{{mainData&&mainData.ddzs}}</h3>
                <div style="color: #222;">订单总计</div>
              </div>
            </div>
            <div class="card" style="background-color: #ffcf7c;">
              <div class="iconBox"> <i class="el-icon-s-order"></i> </div>
              <div class="cardTxt">
                <h3>{{mainData&&mainData.cpzs}}</h3>
                <div>产品总计</div>
              </div>
            </div>
            <div class="card" style="color: #ffcf7c;">
              <div class="iconBox"> <i class="el-icon-box"></i> </div>
              <div class="cardTxt">
                <h3>{{mainData&&mainData.skuzs}}</h3>
                <div style="color: #222;">sku总数</div>
              </div>
            </div>
          </div> -->

      <div class="lineBox">
        <div class="chartsBox">

          <div style="display: flex;">
            <el-date-picker v-model="timeArr" value-format="timestamp" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" @change="timeArr=$event;timeChange" clearable>
            </el-date-picker>
            <el-input v-model="title" placeholder="请输入商品名称" clearable style="width: 180px;margin: 0 10px"></el-input>
            <el-cascader v-model="region" :props="{label: 'fullname', value: 'fullname'}" :options="regionOptions"
              @change="region=$event.value.join(',')" clearable></el-cascader>
            <el-button type="primary" size="mini" @click="initMainData" style="margin: 0 10px">筛选</el-button>
          </div>
          <div class="charts">
            <!-- <solely-echarts :options="echartsOptions1"></solely-echarts> -->
            <el-table :data="mainData" height="340" border style="width: 100%">
              <el-table-column prop="s_time" ali label="日期" align="center">
                <template slot-scope="scope">
                  <span>{{$$timeto(scope.row.s_time*1000,'ymd')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderPrice" label="业绩" align="center">
                <template slot-scope="scope">
                  <span style="color: red;font-size: 18rpx;font-weight: bold;">￥{{scope.row.orderPrice}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderOPrice" label="利润" align="center">
                <template slot-scope="scope">
                  <span style="color: red;font-size: 18rpx;font-weight: bold;">￥{{scope.row.orderOPrice}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>


            <div style="display: flex;margin-top: 20px">
              <el-date-picker v-model="timeArr1" value-format="timestamp" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" @change="timeArr1=$event;timeChange" clearable>
              </el-date-picker>
              <el-input v-model="title1" placeholder="请输入商品名称" clearable style="width: 180px;margin: 0 10px"></el-input>
              <el-cascader v-model="region1" :props="{label: 'fullname', value: 'fullname'}" :options="regionOptions"
                @change="region1=$event.value.join(',')" clearable></el-cascader>
              <el-button type="primary" size="mini" @click="statisticTwo" style="margin: 0 10px">筛选</el-button>
              <el-button type="danger" size="mini" @click="excelOutput" style="margin: 0 10px">导出</el-button>
            </div>
            <div class="charts">
              <!-- <solely-echarts :options="echartsOptions2"></solely-echarts> -->
              <!-- <solely-echarts :options="echartsOptions3"></solely-echarts> -->
              <el-table :data="mainData1" height="340" border style="width: 100%">
                <el-table-column prop="title" label="商品名称" align="center">
                </el-table-column>
                <el-table-column prop="sumPrice" label="销售额" width="180" align="center">
                  <template slot-scope="scope">
                    <span style="color: red;font-size: 18rpx;font-weight: bold;">￥{{scope.row.sumPrice}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sumCount" label="销量" width="180" align="center">
                  <template slot-scope="scope">
                    <span style="color: red;font-size: 18rpx;font-weight: bold;">{{scope.row.sumCount}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>

        </div>
        <div class="otherBox">
          <!-- <div class="weather">
                <div class="img">
                  <img src="../../../static/img/day1.gif" >
                  <h2>{{weatherData.wendu}}℃</h2>
                  <div>{{weather.type}}</div>
                </div>
                <div class="weatherTxt">
                  <div>
                    <h2>{{weatherData.city}}</h2>
                    <div>{{weather.low+' ~ '+weather.high}}</div>
                    <div>{{weather.fengxiang}}</div>
                  </div>
                  <h4>{{weatherTxt}}</h4>
                </div>
              </div> -->
          <!-- <div class="rank">
                <h2>产品销量排行</h2>
                <div class="rankPro" v-for="(item,index) in rankData" :key="index">
                  <img :src="item&&item.bannerImg&&item.bannerImg[0]&&item.bannerImg[0].url" >
                  <div class="rankInfo">
                    <div>{{item.title}}</div>
                    <div style="color: red;font-weight: bold;">￥{{item.sumPrice}}</div>
                  </div>
                  <div>销量：{{item.sumCount}}</div>
                </div>
              </div> -->
        </div>
      </div>

    </div>


  </div>
</template>

<script>
  import dashboardJs from './dashboard.js'
  export default dashboardJs
</script>

<style scoped>
  .dashboard{text-align: left;}
  .dashboard div{box-sizing: border-box;}
  .dashboard .head{padding: 20px; background-color: #f0f0f0}
  .dashboard .head .txt1{font-size: 22px;}
  .dashboard .head .txt2{font-size: 14px;color: #666;padding-top: 10px;}
  .dashboard .dashCon{padding: 20px;background-color: #f5f5f5;}
  .dashCon .cardBox{overflow: hidden;}
  .dashCon .card{width: 23.8%;background-color: #aaaaff;padding: 10px;float: left;height: 130px;margin-left: 1.6%;display: flex;align-items: center;}
  .dashCon .card:nth-child(1){margin-left: 0;}
  .iconBox{padding: 10px 10%;border-right: 1px solid #e1e1e1;font-size: 30px;}
  .card:nth-child(2n-1){color: #fff;}
  .card:nth-child(2n){background-color: #fff;}
  .cardTxt{padding-left: 12%;}
  .cardTxt h3{font-size: 26px;margin: initial;padding-bottom: 5px;}

  .lineBox{overflow: hidden;}
  .chartsBox{width: 100%;float: left;}
  .charts{background-color: #fff;padding: 20px;height: 380px;margin-top: 20px;display: flex;}

  .otherBox{width: 28%;float: left;padding: 20px 0 0 20px;}
  .weather{background-color: #fff;overflow: hidden;}
  .weather .img{width: 40%;height: 200px;float: left;color: #fff;position: relative;overflow: hidden;}
  .weather img{position: absolute;left: 0;bottom: 0;right: 0;top: 0;height: 200px;}
  .weather .img h2{position: relative;font-size: 30px;text-align: center;margin: 25px 0 5px;}
  .weather .img div{position: relative;font-size: 14px;text-align: center;font-weight: bold;}
  .weatherTxt{float: left;width: 60%;padding: 0 10px;display: flex;flex-direction: column;justify-content: space-between;height: 200px;}
  .weatherTxt h2{margin: 15px 0;color: #aaaaff;}
  .weatherTxt div{padding-bottom: 5px;}
  .weatherTxt h4{font-weight: normal;color:#999;text-align: center;font-size: 12px;}

  .rank{background-color: #fff;padding: 20px;margin-top: 20px;height: 440px;}
  .rank h2{margin: 0 0 20px;}
  .rankPro{overflow: hidden;margin-bottom: 15px;display: flex;align-content: center;justify-content: space-between;}
  .rankPro img{width: 100px;height: 60px;}
  .rankPro .rankInfo{padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;height: 60px;flex: 1;padding-right: 50px;}
</style>
